<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复盘首页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<!--    <link href="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap.min.css" rel="stylesheet">-->

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div  th:if ="${needLogin == 1}" class="col-sm-12 white-bg">
                <blockquote class="text-danger" style="font-size:14px; border-left-color: #ed5565;">
                    <span><h2>复盘爱好者基地 欢迎您的到来</h2></span>
                    <br>1.该页只展示基本的页面，后续更多体验请联系 158xxxxxxxx ，登陆请<a href="/index">点击这里</a>
                    <br>2.有任何建议，可以直接联系负责人
                    <br>3.主要的功能会在今年年底前慢慢完善，后续会根据大家的建议来衡量开发的必要性
                    <br>4.我们不盈利，但是也需要一定的资金来维持服务器的运行以及后续的开发，如果您觉得可以，请支持下我们
                </blockquote>
                <hr>
            </div>
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title text-danger">
                        <h5>各时刻上涨家数</h5>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins" id="moment-upcount">
                            <thead>
                            <tr>
                                <th style="width: 80px">日期</th>
                                <th><i class="fa fa-clock-o"></i> 09:25</th>
                                <th class="text-danger"><i class="fa fa-clock-o"></i> 10:00</th>
                                <th class="text-danger"><i class="fa fa-clock-o"></i> 10:30</th>
                                <th class="text-danger"><i class="fa fa-clock-o"></i> 11:00</th>
                                <th><i class="fa fa-clock-o"></i> 11:30</th>
                                <th><i class="fa fa-clock-o"></i> 14:00</th>
                                <th><i class="fa fa-clock-o"></i> 15:00</th>
                            </tr>
                            </thead>
                            <tbody id="moment-upcount-body">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title text-danger">
                        <h5>半年新高</h5>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                            <tr>
                                <th style="width: 80px">日期</th>
                                <th style="width: 100px">新高个数</th>
                                <th style="width: 100px">最多个数板块</th>
                                <th style="width: 100px">最多板块个数</th>
                                <th>所有新高板块</th>
                                <th>代表</th>
                                <th>权重代表</th>
                            </tr>
                            </thead>
                            <tbody id="newhigh120-body">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title text-danger">
                        <h5>历史新高</h5>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                            <tr>
                                <th style="width: 80px">日期</th>
                                <th style="width: 100px">新高个数</th>
                                <th style="width: 100px">最多个数板块</th>
                                <th style="width: 100px">最多板块个数</th>
                                <th>所有新高板块</th>
                                <th>代表</th>
                                <th>权重代表</th>
                            </tr>
                            </thead>
                            <tbody id="newhigh-body">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title text-danger">
                        流通值图例：<span class="badge badge-warning">200亿以上</span> <span class="badge badge-success">100亿以上</span>
                        <span class="badge badge-info">50亿以上</span> <span class="badge badge-primary">50亿以下</span>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                            <tr>
                                <th style="width: 50px">日期</th>
                                <th style="min-width: 50px">二板</th>
                                <th style="min-width: 50px">三板</th>
                                <th style="min-width: 50px">四板</th>
                                <th style="min-width: 50px">五板</th>
                                <th style="min-width: 50px">六板</th>
                                <th  style="min-width: 50px">溢价</th>
                                <th style="width: 70px">连板溢价</th>
                                <th  style="min-width: 50px">炸板率</th>
                                <th  style="min-width: 50px">涨停</th>
                                <th  style="min-width: 50px">跌停</th>
                                <th  style="min-width: 50px">涨家</th>
                                <th style="width: 70px">北向-亿</th>
                                <th style="width: 70px">成交-亿</th>
                            </tr>
                            </thead>
                            <tbody id="zt-report-body">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title text-danger">
                        流通值图例：<span class="badge badge-warning">200亿以上</span> <span class="badge badge-success">100亿以上</span>
                        <span class="badge badge-info">50亿以上</span> <span class="badge badge-primary">50亿以下</span>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                            <tr>
                                <th style="width: 50px">日期</th>
                                <th>强势股</th>
                                <th style="min-width: 50px">一板</th>
                                <th style="min-width: 50px">二板</th>
                                <th style="min-width: 50px">三板</th>
                                <th style="width: 70px">强势溢价</th>
                                <th style="width: 70px">涨停溢价</th>
                                <th style="min-width: 50px">强势</th>
                                <th style="min-width: 50px">涨停</th>
                                <th style="min-width: 50px">跌停</th>
                            </tr>
                            </thead>
                            <tbody id="zt-report20cm-body">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-8 ">
                <div class="ibox float-e-margins">
                    <div class="ibox-title text-danger">
                        这块还在精细化，避免误导，所以暂时不展示
                    </div>
                    <div class="ibox-content">
                        <table id="conceptTable" class="display" style="width:100%">
                            <thead>
                            <tr>
                                <th>股票名称</th>
                                <th>连板数</th>
                                <th>概念</th>
                                <th>理由</th>
                                <th>个数</th>
                                <th>换手率</th>
                                <th>流通值</th>
                            </tr>
                            </thead>
                            <tbody>


                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>

            </div>
            <div class="col-sm-4">
                <div class="col-sm-12 text-danger">
                    假如工具对您有用，请支持一下作者
                </div>
                <div class="col-sm-6">
                    <img src="../static/img/wechat.jpg" style="width: 100%" th:src="@{/img/wechat.jpg}">
                </div>
                <div class="col-sm-6">
                    <img src="../static/img/zhifubao.jpg" style="width: 100%" th:src="@{/img/zhifubao.jpg}">
                </div>
                <div class="ibox">
                    <div class="ibox-content">
                        <h3>进行中</h3>
                        <p class="small"><i class="fa fa-hand-o-up"></i> 计划下一步开发的功能模块及时间点</p>
                        <ul class="sortable-list connectList agile-list">
                            <li class="warning-element">
                                推出 龙虎榜菜单 ，6月中旬前先记录机构，热门席位龙虎榜争取一起出来
                                <div class="agile-detail">
                                    <i class="fa fa-clock-o"></i> 2023.06.21
                                </div>
                            </li>
                            <li class="danger-element">
                                推出 板块菜单 ，用来记录最近的热门概念相关的板块及板块内的个股
                                <div class="agile-detail">
                                    <i class="fa fa-clock-o"></i> 2023.07.14
                                </div>
                            </li>
                            <li class="danger-element">
                                精细化板块个股，提高首页板块分组的准确率
                                <div class="agile-detail">
                                    <i class="fa fa-clock-o"></i> 2023.07.21
                                </div>
                            </li>
                            <li class="info-element">
                                推出 我的复盘 菜单，这个比较重要！对于之后的跟踪自己的交易计划有关。这个栏目需要比较细致的设计，有建议的朋友多提提意见。
                                <div class="agile-detail">
                                    <i class="fa fa-clock-o"></i> 2023.09.30
                                </div>
                            </li>
                            <li class="info-element">
                                部分容易量化的战法的实时提醒，只针对自己的要求
                                <div class="agile-detail">
                                    <i class="fa fa-clock-o"></i> 2023.10.31
                                </div>
                            </li>
                            <li class="info-element">
                                当前节点 及 适合的交易方式的智能化提醒 算法，这个只适合自己，哈哈哈
                                <div class="agile-detail">
                                    <i class="fa fa-clock-o"></i> 2023.12.31
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

         </div>
      </div>

    <div class="modal inmodal fade" id="newHighModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">窗口标题</h4>
                    <small class="font-bold">这里可以显示副标题。</small>
                </div>
                <div class="modal-body">
                    <p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.7最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
<!--    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap.min.js"></script>-->
<!--    <th:block th:include="include :: sparkline-js" />-->
    <script th:inline="javascript">
	    //-----上涨家数表----------
        var upcountList =[[${upcountList}]]
        var upcountToday =[[${upcountToday}]]
        if (upcountToday){
            // alert(1)
            appendMomentUpcountTable(upcountToday)
        }
        upcountList.forEach((ele,index,arr)=>{
            appendMomentUpcountTable( ele )
        })
        function appendMomentUpcountTable(oneUpcount){
            oneUpcount = JSON.parse( oneUpcount )
            $("#moment-upcount-body").append(
                "<tr><td>"+oneUpcount['trade_date'].substr(5)+"</td>" +
                data2String(oneUpcount['data1'])+data2String(oneUpcount['data2'])+data2String(oneUpcount['data3'])+
                data2String(oneUpcount['data4'])+data2String(oneUpcount['data5'])+data2String(oneUpcount['data6'])+
                data2String(oneUpcount['data7'])+ "</tr>"
            )
        }
        //用于对上涨个数的字符串格式化
        function data2String(data) {
            if(data) {
                if(data>3700){
                    return "<td><span class=\"label label-danger\">"+data+"</span></td>";
                }else if(data>3000){
                    return "<td class=\"text-danger font-bold\"><i class=\"fa fa-level-up\"> "+data+"</td>";
                }
                else if(data<700){
                    return "<td><span class=\"label label-primary\">"+data+"</span></td>";
                }
                else if(data<1300){
                    return "<td class=\"text-navy font-bold\"><i class=\"fa fa-level-down\"> "+data+"</td>";
                }else{
                    return "<td>"+data+"</td>";
                }
            }else{return "<td >0</td>";}
        }
        //-----上涨家数表结束----------
        //-----新高表----------
        var newhigh120 =[[${newhigh120}]]
        newhigh120.forEach((ele,index,arr)=>{
            appendNewhighTable( ele, "newhigh120" )
        })
        var newhigh =[[${newhigh}]]
        newhigh.forEach((ele,index,arr)=>{
            appendNewhighTable( ele,"newhigh")
        })
        function appendNewhighTable(oneNewhigh,whichType){
            oneNewhigh = JSON.parse( oneNewhigh )
            oneNewhigh["summary"] = oneNewhigh["summary"].substring(0, oneNewhigh["summary"].length - 1);
            var all = oneNewhigh["summary"].split(",")
            var boss = all[0].split("-")
            var newOneNewhigh=""
            if(all.length>10 && boss[1]>1){
                all.forEach((ele,index,arr)=>{
                    if(index<10){
                        newOneNewhigh =newOneNewhigh+ele+" ";
                    }
                    // if(ele.split("-")[1]>1){
                    //     newOneNewhigh =newOneNewhigh+ele+" ";
                    // }
                })
            }else{
                newOneNewhigh = oneNewhigh["summary"]
            }
            $("#"+whichType+"-body").append(
                "<tr><td>"+oneNewhigh['trade_date'].substr(5)+"</td><td>"+oneNewhigh['total'] +"</td><td><a data-toggle='modal' data-target='#newHighModal'>"
                +boss[0]+"</a></td><td>"+boss[1]+"</td><td>"+newOneNewhigh+"</td><td>"+(oneNewhigh['stocks100']?oneNewhigh['stocks100']:'')+"</td><td>"+(oneNewhigh['stocks200']?oneNewhigh['stocks200']:'')+"</td></tr>"
                )
        }
        //-----新高表结束----------
        //-----报表开始----------
        var daily_report =[[${daily_report}]]
        daily_report.forEach((ele,index,arr)=>{
            appendZtReportTable( ele )
        })
        function appendZtReportTable(ztReport){
            ztReport = JSON.parse( ztReport )
            $("#zt-report-body").append(
                "<tr><td>"+ztReport['trade_date'].substr(5)+"</td><td>"+transStockStr(ztReport['ban2']) +"</td><td>"+transStockStr(ztReport['ban3'])
                +"</td><td>"+transStockStr(ztReport['ban4']) +"</td><td>"+transStockStr(ztReport['ban5']) +"</td><td>"+transStockStr(ztReport['ban6'])
                +"</td>"+colorTextByCondition(ztReport['over'],0,0)+colorTextByCondition(ztReport['over_lb'],0,0)+colorTextByCondition(ztReport['zb_rate'],30,15,'-')
                +colorTextByCondition(ztReport['zt_count'],70,30)
                +colorTextByCondition(ztReport['dt_count'],30,15,'-')+colorTextByCondition(ztReport['upcount'],3000,1300)
                +colorTextByCondition(ztReport['hk'],0,0,'hk') +colorTextByCondition(ztReport['all_money'],10000,7000,'total')+"</tr>"
            )
        }

        var daily_report20cm =[[${daily_report20cm}]]
        daily_report20cm.forEach((ele,index,arr)=>{
            appendZtReport20cmTable( ele)
        })
        function appendZtReport20cmTable(ztReport){
            ztReport = JSON.parse( ztReport )
            $("#zt-report20cm-body").append(
                "<tr><td>"+ztReport['trade_date'].substr(5)+"</td><td>"+transStockStr(ztReport['good_ones']) +"</td><td>"+transStockStr(ztReport['ban1'])
                +"</td><td>"+transStockStr(ztReport['ban2']) +"</td><td>"+transStockStr(ztReport['ban3']) +"</td>"
                +colorTextByCondition(ztReport['over'],0,0)+colorTextByCondition(ztReport['ban_over'],0,0)+"<td>"+ztReport['qs_count']+"</td>"
                +"<td>"+ztReport['zt_count']+"</td>"+exColorTextByCondition(ztReport['dt_count'],2,0,'-')+"</tr>"
            )
        }
        function transStockStr(stocks_str) {
            if(stocks_str){
                var stocks = stocks_str.split("|");
                var back_str = "";
                stocks.forEach((ele,index,arr)=>{
                    if(ele){
                        var stock_info = ele.split(":")
                        var stock_name = stock_info[0];
                        var circulated_value = stock_info[1];
                        var concept = stock_info[2];
                        if(circulated_value>200){
                            back_str = back_str+'<span class="badge badge-warning" title="'+concept+'">'+stock_name+'</span> '
                        }else if(circulated_value>100){
                            back_str = back_str+'<span class="badge badge-success" title="'+concept+'">'+stock_name+'</span> '
                        }else if(circulated_value>50){
                            back_str = back_str+'<span class="badge badge-info" title="'+concept+'">'+stock_name+'</span> '
                        }else{
                            back_str = back_str+'<span class="badge badge-primary" title="'+concept+'">'+stock_name+'</span> '
                        }
                    }
                })
                return back_str
            }
            return ""
        }
        //返回的是表格 <td>
        function colorTextByCondition(data,up,low,dir){
            if(String(data).indexOf(".")>-1){
                data = data.toFixed(2)
            }
            if(dir=="hk"){
                data = data / 10000
                data = data.toFixed(2)
            }
            if(dir=="total"){
                data = data / 10000
                data = Math.round(data)
            }
            if(data>up){
                if(dir=="-"){
                    return "<td class='text-navy'>"+data+"</td>"
                }
               return "<td class='text-danger'>"+data+"</td>"
            }
            if(data<low){
                if(dir=="-"){
                    return "<td class='text-danger'>"+data+"</td>"
                }
                return "<td class='text-navy'>"+data+"</td>"
            }
            return "<td>"+data+"</td>"
        }
        function exColorTextByCondition(data,up){
            if(data>up){
                return "<td><span class=\"label label-primary\">"+data+"</span></td>"
            }
            return "<td>"+data+"</td>"
        }

        //-----报表结束----------

        //-----概念板块开始-----

        var concepts =[]
        var conceptTable = $('#conceptTable').DataTable({
            "paging": false,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": false,
            "autoWidth": false,
            "responsive": true,
            "data": concepts,
            "columns": [
                { "data": function(obj){
                        return getName(obj) },"width":"60px" },
                { "data": "limit_times","width":"50px" },
                { "data": "hot_concept" },
                { "data": "comment" },
                { "data": "num" },
                { "data":
                        function(obj){
                            if (isNaN(obj.turnover_rate)){
                                return obj.turnover_rate;
                            }else {
                                return parseFloat(obj.turnover_rate).toFixed(1);
                            }
                        } },
                { "data":
                        function(obj){
                            if (isNaN(obj.circulated_value)){
                                return obj.circulated_value;
                            }else {
                                return parseFloat(obj.circulated_value/100000000).toFixed(1);
                            }
                        }},
            ],
            "columnDefs": [
                { "visible": false, "targets": 4 },
                { "visible": false, "targets": 2 }
            ],
            "order": [ 4, 'desc' ],
            // "displayLength": 25,
            "drawCallback": function ( settings ) {
                var api = this.api();
                var rows = api.rows( {page:1}).nodes();
                var last=null;

                api.column(2,{page:1}).data().each( function ( group, i ) {
                    if ( last !== group ) {
                        $(rows).eq( i ).before(
                            '<tr class="group"><td colspan="6" style="font-weight: bold;font-size: 15px;color: red">'+group+'</td></tr>'
                        );

                        last = group;
                    }
                } );
            }
        } );

        conceptTable.order( [ 4, "desc" ], [ 2, "desc" ], [ 1, "desc" ] ).draw();
        function getName(obj) {
            console.log(obj)
            if(obj.symbol.startsWith("30")){
                return obj.name+'-创';
            }
            if(obj.symbol.startsWith("688")){
                return obj.name+'-科';
            }
            return obj.name;
        }

        //-----概念板块结束-----
    </script>
</body>
</html>
